<template>
  <div>
    <Header />
    <Right />
    <!-- 查询 -->
    <van-search v-model="title" show-action placeholder="区域/小区/商圈/关键字" background="#F8F8F8">
      <template #action>
        <div @click="OnSearch" class="search_btn">搜索</div>
        <img src="../../assets/image/dtzf_icon.png" alt class="dtzf_icon" @click="OnMap" />
      </template>
    </van-search>
    <!-- 筛选 -->
    <div class="screen">
      <div class="screen_drop">
        <van-dropdown-menu>
          <van-dropdown-item title="区域" ref="region">
            <van-tree-select
              :items="items"
              @click-nav="Onarea()"
              :main-active-index.sync="activeIndex"
            >
              <template #content class="region_p">
                <p
                  v-for="(item, index) in allTwoHouse"
                  :key="index"
                  :class="[active == item.id ? 'region_p_item' : '']"
                  @click="
                    (active = item.id),
                      (businessAreaId = item.id),
                      (activeName = item.name)
                  "
                >{{ item.name }}</p>
              </template>
            </van-tree-select>
            <div class="screen_btn">
              <div class="reset" @click="regionEmpty">
                <img src="../../assets/image/cz.png" alt />
                <p>重置</p>
              </div>
              <p class="define" @click="regionFix(1)">确定</p>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="价格" ref="price">
            <div class="select_box">
              <p class="screen_title">单价(元)</p>
              <p class="select_time" v-if="priceShow">
                <input type="text" placeholder="最低价格" v-model="minprice" />至
                <input type="text" placeholder="最高价格" v-model="maxprice" />
              </p>
              <div class="select_list">
                <p
                  v-for="(item, index) in priceList"
                  :key="index"
                  :class="[priceText == item.name ? 'details_color' : '']"
                  @click="Onprice(item)"
                >{{ item.name }}</p>
              </div>
              <div class="screen_btn">
                <div class="reset" @click="priceEmpty">
                  <img src="../../assets/image/cz.png" alt />
                  <p>重置</p>
                </div>
                <p class="define" @click="priceFix(1)">确定</p>
              </div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="户型" ref="room">
            <div class="select_box">
              <p class="screen_title">选择户型</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in roomList"
                  :key="index"
                  :class="[roomId == item.id ? 'details_color' : '']"
                  @click="Onroom(item)"
                >{{ item.name }}</p>
              </div>
              <div class="screen_btn">
                <div class="reset" @click="roomEmpty">
                  <img src="../../assets/image/cz.png" alt />
                  <p>重置</p>
                </div>
                <p class="define" @click="roomFix(1)">确定</p>
              </div>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="更多" ref="more">
            <div class="select_box">
              <p class="screen_title">面积</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in squareList"
                  :key="index"
                  :class="[squareText == item.name ? 'details_color' : '']"
                  @click="Onsquare(item)"
                >{{ item.name }}</p>
              </div>
              <p class="select_time" v-if="squareShow">
                <input type="text" placeholder="最低面积" v-model="minsquare" />
                至
                <input type="text" placeholder="最高面积" v-model="maxsquare" />
              </p>
              <p class="screen_title">状态</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in startList"
                  :key="index"
                  :class="[startId == item.id ? 'details_color' : '']"
                  @click="Onstart(item)"
                >{{ item.name }}</p>
              </div>
              <p class="screen_title">阶段</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in stageList"
                  :key="index"
                  :class="[stageId == item.id ? 'details_color' : '']"
                  @click="Onstage(item)"
                >{{ item.name }}</p>
              </div>
              <p class="screen_title">是否限购</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in quotaList"
                  :key="index"
                  :class="[quotaId == item.id ? 'details_color' : '']"
                  @click="Onquota(item)"
                >{{ item.name }}</p>
              </div>
              <p class="screen_title">时间</p>
              <div class="select_list">
                <p
                  v-for="(item, index) in timeList"
                  :key="index"
                  :class="[timeId == item.id ? 'details_color' : '']"
                  @click="Ontime(item)"
                >{{ item.name }}</p>
              </div>
              <div class="screen_btn">
                <div class="reset" @click="moreEmpty">
                  <img src="../../assets/image/cz.png" alt />
                  <p>重置</p>
                </div>
                <p class="define" @click="moreFix(1)">确定</p>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <p @click="Onorder" class="screen_tab">
        <img src="../../assets/image/px.png" alt style="width:.1rem" v-if="order== 'sell_time_d'" />
        <img src="../../assets/image/px_down.png" alt style="width:.1rem" v-else />
      </p>
    </div>
    <List :num="num" v-bind:list="allHouse" />
    <p @click="Onmore" class="Onmore" v-if="text == true">查看更多</p>
    <van-loading type="spinner" color="#1989fa" class="Onmore" v-if="loadingShow == false" />
    <Footer />
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import List from "@/components/m_file/list.vue";
import Right from "@/components/m_file/right.vue";
export default {
  data() {
    return {
      num: "1",
      value: "",
      value1: 0,
      value2: "a",
      activeId: "",
      activeName: "",
      active: "",
      title: "",
      moreLength: "",
      activeIndex: 0,
      region: false,
      price: false,
      minprice: "",
      minsquare: "",
      maxsquare: "",
      maxprice: "",
      house: false,
      businessAreaId: "",
      more: false,
      loadingShow: true,
      countyId: "", //区域
      parkId: "", //车位
      roomId: "", //卧室数量
      roomText: "",
      priceId: "", //价格
      priceShow: false,
      priceText: "不限",
      squareId: "", //面积
      squareShow: false, //面积
      squareText: "不限", //面积
      startId: "", //状态
      stageId: "", //阶段
      order: "sell_time_d",
      timeId: "", //时间
      allHouse: [],
      quotaId: "",
      total: "",
      page: 1,
      loading: false,
      text: true,
      totalPage: "",
      Moreshow: false,
      items: [
        {
          text: "不限",
          name: "不限",
          badge: 3,
          dot: true,
          className: "my-class"
        }
      ],
      allTwoHouse: [],
      itemsList: [
        {
          text: "不限",
          name: "不限",
          badge: 3,
          id: "",
          dot: true,
          className: "my-class"
        }
      ],
      // 车位
      parking: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "1车位"
        },
        {
          id: "2",
          name: "2车位"
        }
      ],
      quotaList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "限购"
        },
        {
          id: "2",
          name: "不限购"
        }
      ],
      // 居室
      roomList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "1居室"
        },
        {
          id: "2",
          name: "2居室"
        },
        {
          id: "3",
          name: "3居室"
        },
        {
          id: "4",
          name: "4居室"
        },
        {
          id: "5",
          name: "5居室"
        },
        {
          id: "6",
          name: "5居室以上"
        }
      ],
      //价格
      priceList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "0~200",
          name: "200万以下"
        },
        {
          id: "200~300",
          name: "200-300万"
        },
        {
          id: "300~500",
          name: "300-500万"
        },
        {
          id: "500~800",
          name: "500-800万"
        },
        {
          id: "800~1000",
          name: "800-1000万"
        },
        {
          id: "1000~100000",
          name: "1000万以上"
        },
        {
          id: "",
          name: "自定义"
        }
      ],
      // 面积
      squareList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "0~20",
          name: "20㎡以下"
        },
        {
          id: "50~70",
          name: "50㎡~70㎡"
        },
        {
          id: "70~90",
          name: "70㎡~90㎡"
        },
        {
          id: "90~120",
          name: "90㎡~120㎡"
        },
        {
          id: "120~140",
          name: "120㎡~140㎡"
        },
        {
          id: "140~160",
          name: "140㎡~160㎡"
        },
        {
          id: "160~200",
          name: "160㎡~200㎡"
        },
        {
          id: "200~100000",
          name: "200㎡以上"
        },
        {
          id: "",
          name: "自定义"
        }
      ],
      // 状态
      startList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "即将拍卖"
        },
        {
          id: "2",
          name: "正在拍卖"
        },
        {
          id: "3",
          name: "拍卖结束"
        }
      ],
      //阶段
      stageList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "1",
          name: "一拍"
        },
        {
          id: "2",
          name: "二拍"
        },
        {
          id: "3",
          name: "三拍"
        },
        {
          id: "4",
          name: "变卖"
        },
        {
          id: "5",
          name: "成交"
        },
        {
          id: "6",
          name: "流拍"
        }
      ],
      //时间

      timeList: [
        {
          id: "",
          name: "不限"
        },
        {
          id: "3days",
          name: "最近3天"
        },
        {
          id: "7days",
          name: "最近7天"
        },
        {
          id: "30days",
          name: "最近30天"
        }
      ]
    };
  },
  mounted() {
    // 区域接口
    this.title = this.$route.params.title;
    if (this.title) {
      this.Onsearch();
    } else {
      this.OngetHouseList();
    }
    this.OngetListByPid();
    this.Onmore();
  },

  methods: {
    OnMap() {
      this.$router.push({
        name: "M_map"
      });
    },
    onCancel() {
      Toast("取消");
    },
    Onmore() {
      if (this.page <= this.totalPage) {
        this.page += 1;
        if (this.title) {
          this.Onsearch();
        } else {
          this.OngetHouseList();
        }
      } else {
        this.text = false;
      }
    },
    OnSearch() {
      console.log("111");
      this.page = "1";
      this.parkId = "";
      this.squareId = "";
      this.startId = "";
      this.stageId = "";
      this.businessAreaId = "";
      this.timeId = "";
      this.activeId = "";
      this.priceId = "";
      this.roomId = "";
      this.minprice = "";
      this.maxprice = "";
      this.quotaId = "";
      this.Onsearch();
    },
    Onsearch() {
      this.instance
        .search({
          title: this.title,
          page: this.page,
          limit: 9,
          order: this.order
        })
        .then(res => {
          if (res.data.code == 0) {
            this.total = res.data.count;
            this.totalPage = res.data.page;

            if (this.page == this.totalPage) {
              this.allHouse = res.data.data;
              this.text = false;
              console.log(this.totalPage);
            } else {
              this.text = true;
              if (this.page == 1) {
                this.allHouse = res.data.data;
              } else {
                this.allHouse.push(...res.data.data);
              }

              console.log(that.totalPage, 111);
            }
          } else {
            that.allHouse = [];
            that.text = false;
          }
        })
        .catch(function(error) {});
    },

    // 区域接口
    OngetListByPid() {
      const that = this;
      this.instance
        .getListByPid({
          id: "0"
        })
        .then(res => {
          console.log(res.data.data);
          let areaList = that.itemsList;
          res.data.data.forEach((item, index) => {
            item.text = item.name;
          });
          Array.prototype.push.apply(areaList, res.data.data);
          that.items = areaList;
        });
    },
    // 区域点击
    Onarea() {
      this.active = "";
      console.log(this.activeIndex);
      let Id = "";
      let children = [
        {
          name: "不限",
          id: ""
        }
      ];
      let allTwoHouse = children;
      this.itemsList.forEach((item, index) => {
        if (index == this.activeIndex) {
          Id = item.id;
          this.activeId = item.id;
          this.activeName = item.name;
        }
      });
      this.instance
        .getListByPid({
          id: Id
        })
        .then(res => {
          if (res.data.code == "0") {
            res.data.data.forEach((item, index) => {
              allTwoHouse.push(item);
            });
          }
        })
        .catch(function(error) {});
      this.allTwoHouse = allTwoHouse;
      console.log(allTwoHouse);
    },
    // 价格点击
    Onprice(val) {
      this.priceText = val.name;
      if (val.name == "自定义") {
        this.priceShow = true;
      } else {
        this.priceId = val.id;
        this.priceShow = false;
      }
    },
    // 居室点击
    Onroom(val) {
      this.roomId = val.id;
      this.roomText = val.name;
    },
    // 车位点击
    Onpark(val) {
      this.parkId = val.id;
      this.Moreshow = true;
    },

    // 面积
    Onsquare(val) {
      this.squareText = val.name;
      this.Moreshow = true;
      if (val.name == "自定义") {
        this.squareShow = true;
      } else {
        this.squareId = val.id;
        this.squareShow = false;
      }
    },
    // 状态
    Onstart(val) {
      this.startId = val.id;
      this.Moreshow = true;
    },
    // 开拍时间
    Ontime(val) {
      this.timeId = val.id;
      this.Moreshow = true;
    },
    // 阶段
    Onstage(val) {
      this.stageId = val.id;
      this.Moreshow = true;
    },
    Onquota(val) {
      this.quotaId = val.id;
      this.Moreshow = true;
    },
    // 区域重置
    regionEmpty() {
      this.Moreshow = false;
      this.activeId = "";
      this.activeIndex = 0;
    },
    // 区域确定
    regionFix(val) {
      this.title = "";
      if (val == 1) {
        this.page = 1;
      }
      this.OngetHouseList();
      this.region = false;
      this.$refs.region.toggle();
    },
    // 价格
    priceEmpty() {
      this.priceId = "";
      this.minprice = "";
      this.maxprice = "";
      this.priceText = "不限";
    },
    priceFix(val) {
      this.title = "";
      if (val == 1) {
        this.page = 1;
      }
      if (this.priceShow == true) {
        this.priceId = this.minprice + "~" + this.maxprice;
      }
      this.OngetHouseList();
      this.price = false;
      this.$refs.price.toggle();
    },
    // 户型
    roomEmpty() {
      this.roomId = "";
    },
    roomFix(val) {
      this.title = "";
      if (val == 1) {
        this.page = 1;
      }
      this.OngetHouseList();
      this.house = false;
      this.$refs.room.toggle();
    },
    // 更多
    moreEmpty() {
      this.parkId = "";
      this.squareId = "";
      this.startId = "";
      this.stageId = "";
      this.timeId = "";
      this.maxsquare = "";
      this.maxsquare = "";
      this.squareText = "不限";
    },
    moreFix(val) {
      this.title = "";
      if (this.squareShow == true) {
        this.squareId = this.minsquare + "~" + this.maxsquare;
      }
      if (val == 1) {
        this.page = 1;
      }
      this.OngetHouseList();
      this.more = false;
      this.$refs.more.toggle();
    },
    Onorder() {
      if (this.order == "sell_time_d") {
        this.order = "sell_time_a";
      } else {
        this.order = "sell_time_d";
      }
      this.OngetHouseList();
    },
    // 全部房源
    OngetHouseList() {
      const that = this;
      this.instance
        .getHouseList({
          countyId: this.activeId, //区域
          businessAreaId: this.businessAreaId,
          parkingCount: this.parkId, //车位
          bedRoomCount: this.roomId, //卧室数量
          priceRange: this.priceId, //价格
          areaRange: this.squareId, //面积
          sellStage: this.startId, //状态
          houseStage: this.stageId, //阶段
          sellTimeRange: this.timeId, //时间
          ynLimit: this.quotaId, //限购
          order: this.order,
          page: this.page,
          limit: 9
        })
        .then(res => {
          that.loadingShow = true;
          if (res.data.code == 0) {
            that.total = res.data.count;
            that.totalPage = res.data.page;

            if (that.page == that.totalPage) {
              that.allHouse = res.data.data;
              that.text = false;
              console.log(that.totalPage);
            } else {
              that.text = true;
              if (that.page == 1) {
                that.allHouse = res.data.data;
              } else {
                that.allHouse.push(...res.data.data);
              }

              console.log(that.totalPage, 111);
            }
          } else {
            that.allHouse = [];
            that.text = false;
          }
        })
        .catch(function(e) {
          if (e.request) {
            that.loadingShow = false;
          }
        });
    }
  },
  components: {
    Header,
    Footer,
    Right,

    List
  }
};
</script>
<style lang="less" scoped>
.van-tree-select__content {
  p {
    padding-left: 0.3rem;
    font-size: 0.13rem;
    color: #333333;
    line-height: 0.5rem;
  }
  .region_p_item {
    color: #f87154;
  }
}
.Onmore {
  font-size: 0.12rem;
  text-align: center;
  line-height: 50px;
}
.van-search__content {
  background: #ffffff;
}
.van-search__action {
  .search_btn {
    margin-right: 0.1rem;
    float: left;
    text-align: center;
    background: linear-gradient(0deg, #f07f00, #ea5d3a, #f5885e);
    width: 0.5rem;
    color: #fff;
    border-radius: 5px;
  }
}
.dtzf_icon {
  width: 0.36rem;
  vertical-align: middle;
}
.van-popup--top {
  margin-top: 1.4rem;
}
.screen {
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2002;
  border-bottom: 1px solid #f8f8f8;
  .screen_tab {
    float: left;
    width: 20%;
    text-align: center;
    font-size: 0.12rem;
    height: 0.44rem;
    line-height: 0.44rem;
    img {
      width: 0.06rem;
      vertical-align: middle;
      margin-left: 0.05rem;
    }
  }
  .select_p {
    color: #f87154;
    .select_red {
      color: #f5643e;
    }
  }
  .screen_drop {
    flex: 1;
    /deep/ .van-dropdown-menu__bar {
      box-shadow: none;
    }
    /deep/ .van-dropdown-menu__title {
      font-size: 0.12rem;
    }
  }
}
.screen_btn {
  overflow: hidden;
  padding: 0.14rem 0.2rem;
  border-top: 1px solid #f1f1f1;

  .reset {
    float: left;
    font-size: 0.12rem;
    color: #333333;
    text-align: center;
    margin-top: 0.1rem;
    width: 20%;
    img {
      width: 0.15rem;
      height: 0.15rem;
    }
  }
  .define {
    width: 80%;
    float: left;
    background: #f87154;
    border-radius: 44px;
    line-height: 0.44rem;
    text-align: center;
    font-size: 0.16rem;
    color: #ffffff;
  }
}
.select_box {
  .screen_title {
    font-size: 0.2rem;
    font-weight: bold;
    color: #1e2223;
    margin: 0.2rem;
  }
  .select_time {
    font-size: 0.24rem;
    color: #232627;
    margin-bottom: 0.2rem;
    input {
      width: 0.8rem;
      padding: 0.02rem 0.4rem;
      font-size: 0.2rem;
      color: #cbcbcb;
      border: none;
      border-bottom: 1px solid #f9f9f8;
    }
  }
}
.select_list {
  margin-left: 0.2rem;
  p {
    float: left;
    margin-right: 0.1rem;
    margin-bottom: 0.13rem;
    width: 21%;
    background: #f9f9f8;
    border: 1px solid #f9f9f8;
    border-radius: 33px;
    font-size: 0.11rem;
    color: #232627;
    line-height: 0.33rem;
    text-align: center;
  }
  .details_color {
    color: #f5643e;
    background: #ffe6e1;
    border: 1px solid #f87154;
  }
}
.select_list {
  overflow: hidden;
}
</style>
<style>
.screen_popup > .van-overlay {
  margin-top: 1.4rem;
}
</style>
